<template>
  <div class="obj-show">
    <el-container class="container">
      <el-header class="header">
        <el-row>
          <el-col :span="3" class="icoBxS">
            <div class="obj_icon">
              <img style="width:120px; height:120px;" :src="obj_icon">
            </div>
          </el-col>
          <el-col :span="18" class="iObjBxS">
            <h3 class="Pt-6 title" cl>{{obj_title}}</h3>
            <el-button v-if="obj_type==='com.scistor.object.entity'" class="moveToGroup" type="warning" size="small" plain @click="moveDialogVisible = true">移动到分组</el-button>
            <div class="tags-container">
              <template v-for="tag in ownerTags">
                <el-tag :key="tag" closable type="success" size="mini" @close="handleRemoveOwnerTag(tag)">{{tag}}</el-tag>
              </template>
              <el-button class="setTag-btn" size="small" plain @click="setTagsDialog_Visible=true" type="primary">设置标签</el-button>
            </div>
          </el-col>
          <el-col :span="3" class="monitor-container text-center">
            <i class="fa fa-podcast fa-2x pointer" @click="saveMonitoringInstance"> </i>
            <p class="pointer" @click="saveMonitoringInstance">加入监控</p>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="main">
        <div class="tab_s">
          <el-tabs v-model="active" type="border-card" @tab-click="handlerTabClick" ref="tabContainer">
            <el-tab-pane v-if="obj_type == 'com.scistor.object.document'" label="文档" name="current_document">
              <current-doc :rowkey="rowkey" :objectUri="objectUri"></current-doc>
            </el-tab-pane>
            <el-tab-pane v-if="obj_type == 'com.scistor.object.media'" label="多媒体" name="current_media">
              <!--视频-->
              <video :src="current_media.src" controls v-show="['mp4','rmvb','avi','mtv','flv','wmv'].includes(current_media.type)"></video>
              <!--音频-->
              <audio :src="current_media.src" controls v-show="['mp3','ogg'].includes(current_media.type)"></audio>
              <!--图片-->
              <img :src="current_media.src" alt="" style="max-width:100%" v-show="['jpg','png','gif'].includes(current_media.type)">
            </el-tab-pane>
            <el-tab-pane label="摘要" name="summary">
              <obj-summary :objectUri="objectUri" :instanceUri="rowkey"></obj-summary>
            </el-tab-pane>
            <el-tab-pane label="相关实体" name="entity">
              <div class="H40t">
                <strong class="Tit-h4 hs5">相关实体</strong>
                <span>
                  <el-button class="fa fa-plus addEntity" type="primary" title="添加实体" @click="showEntityOrEventDialog('Entity')"></el-button>
                </span>
              </div>
              <div>
               <div v-for="item in associationEntity" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="42" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.showName?item.showName:item.displayName,item.iconUrl,item.belongGroup)">
                        <span style="font-size: 14px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 14px">{{item.name}}</span>
                        <p style="width: 100%;line-height:2;white-space:normal">
                          {{item.description}}
                        </p>
                      </div>
               </div>
               </div>
              <!-- <entity-graph ref="entityGraph" v-if="entityGraph_visible" :data="entityGraph_data" :links="entityGraph_links" :height="minHeight"></entity-graph> -->
            </el-tab-pane>
             <el-tab-pane label="相关事件" name="event">
              <div class="H40t">
                <strong class="Tit-h4 hs5">相关事件</strong>
              </div>
              <div>
               <div v-for="item in associationEvent" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="42" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.showName?item.showName:item.displayName,item.iconUrl,item.belongGroup)">
                        <span style="font-size: 14px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 14px">{{item.name}}</span>
                        <p style="width: 100%;line-height:2;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
               </div>
               </div>
              <!-- <entity-graph ref="entityGraph" v-if="entityGraph_visible" :data="entityGraph_data" :links="entityGraph_links" :height="minHeight"></entity-graph> -->
            </el-tab-pane>
            <!--教育经历-->
            <!-- <el-tab-pane label="教育经历" v-if=" objectUri==='com.scistor.object.entity.facebook_user'||objectUri==='com.scistor.object.entity.linkedin_user'" name="educationExperience">
              <obj-experience :data="education_data" title="教育经历" type="education"></obj-experience>
            </el-tab-pane> -->
            <!--工作经历-->
            <!-- <el-tab-pane label="工作经历" v-if="objectUri==='com.scistor.object.entity.facebook_user'||objectUri==='com.scistor.object.entity.linkedin_user'" name="workExperience">
              <obj-experience :data="work_data" title="工作经历" type="work"></obj-experience>
            </el-tab-pane> -->
            <!--相关文档-->
            <!-- <el-tab-pane label="相关文档" v-if="obj_type != 'com.scistor.object.media' && obj_type != 'com.scistor.object.document'&&(belongGroup==='keyfigures'||belongGroup==='focusgroup')" name="document"> -->
              <el-tab-pane label="相关文档"  name="document">
                <div class="H40t">
                  <strong class="Tit-h4 hs5">相关文档</strong>
                  <span>
                    <el-button class="fa fa-plus addEntity" type="primary" title="添加文档" @click="showDocOrMediaDialog('Document')"></el-button>
                  </span>
                </div>
                <obj-document v-if="associationDocument.length>0" :data="associationDocument"></obj-document>
              </el-tab-pane>
              <!--相关多媒体-->
           <!-- <el-tab-pane label="相关多媒体" v-if="obj_type != 'com.scistor.object.media' && obj_type != 'com.scistor.object.document'&&(belongGroup==='keyfigures'||belongGroup==='focusgroup')" name="media"> -->
              <el-tab-pane label="相关多媒体"  name="media">
                <div class="H40t">
                  <strong class="Tit-h4 hs5">相关多媒体</strong>
                  <span>
                    <el-button class="fa fa-plus addEntity" type="primary" title="添加多媒体" @click="showDocOrMediaDialog('Media')"></el-button>
                  </span>
                </div>
                <obj-media v-if="associationMedia.length>0" :data="associationMedia"></obj-media>
              </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
    <!--新增实体或事件对话框-->
    <component :rowkey="rowkey" :objectUri="objectUri" v-bind:is="entityOrEvent_dialog" v-model="entityOrEvent_dialog_visible" :objType="obj_type"></component>
    <!--新增文档或者多媒体对话框-->
    <component :rowkey="rowkey" :type="docOrMedia_add_type" v-bind:is="docOrMedia_dialog" v-model="docOrMedia_dialog_visible" @closeDialog="closeDocOrMediaDialog"></component>
    <!-- 移动分组弹窗 -->
    <component v-if="moveDialogVisible" :rowkey="rowkey" :objectUri="objectUri" v-bind:is="moveToGroup_dialog" v-model="moveDialogVisible"></component>
    <!-- 设置标签弹窗 -->
    <el-dialog class="setTags-dialog" title="设置标签" :visible.sync="setTagsDialog_Visible" width="50%">
      <!-- 标签组中过滤后的标签(过滤掉用户所用的的标签) -->
      <div class="search-container">
        <template v-for="tag in allTags">
          <el-tag :key="tag.id" closable type="info" @close="handleRemoveTag(tag.id)">
            <el-checkbox v-model="tag.isChecked"></el-checkbox>
            {{tag.displayname}}
          </el-tag>
        </template>
        <el-popover v-model="addTag_visible" placement="right" width="200" trigger="click">
          <el-input v-model="currentTag" size="small" placeholder="请输入标签名"></el-input>
          <el-button class="addTag-btn" @click.native="addTags" type="primary" size="small">确定</el-button>
          <el-button slot="reference" @click="addTag_visible=!addTag_visible" size="small" plain type="primary" class="el-icon-plus">添加标签</el-button>
        </el-popover>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseTagsDialog">取 消</el-button>
        <el-button type="primary" @click="markTags">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import analysis from './index'
export default {
  ...analysis
}
</script>
<style lang="less" scoped>
.obj-show {
  .container {
    margin: 10px;
    .header {
      min-height: 132px;
      .icoBxS {
        text-align: center;
        .obj_icon {
          width: 120px;
          height: 120px;
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13);
        }
      }
      .iObjBxS {
        .title {
          padding-top: 15px;
          font-size: 20px;
          color: #1169c4;
          margin-bottom: 5px;
          display: inline-block;
        }
        .moveToGroup {
          padding: 5px 10px;
          display: inline-block;
          vertical-align: middle;
        }
        .details {
          padding-top: 10px;
        }
        .tags-container {
          .el-tag {
            margin: 5px;
          }
          .setTag-btn {
            padding: 5px 10px;
          }
        }
      }
      .monitor-container {
        padding-top: 10px;
      }
    }
  }
  .addEntity {
    margin-left: 20px;
    padding: 8px 20px;
  }
}
</style>
<style lang="less">
.obj-show {
  .container {
    .main {
      min-height: 420px;
      .tab_s {
        background-color: #ebf2fa;
        height: 100%;
        .el-tabs {
          height: 100%;
          .el-tabs__content {
            width: 100%;
            height: 100%;
            .el-tab-pane {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .layout-dynamic{
    margin: 15px 0;
    display: flex;
  }
  .setTags-dialog {
    .search-container {
      .el-tag {
        margin: 0 20px 15px 0;
        background-color: #fff;
        color: #606266;
      }
    }
  }
  .addTag-btn {
    margin-top: 10px;
  }
}
</style>
